<template>
    <div class="wrapper">
        <div class="cont">
            <!--删除-->
            <div class="cont-pre">
                <text class="del-btn font-msyhl" @click="delGoods">删除</text>
            </div>

            <div class="cont-list" ref="swipeTarget" @swipe="onswipe">
                <div class="list-left">
                    <div class="check-goods" @click="checkGoods">
                        <image resize="stretch" class="check-img" :src="goods.g_checked == 1 ? checkedImg : unCheckedImg"></image>
                    </div>

                    <div class="goods-detail" @click="goToDetail">
                        <image resize="cover" class="goods-img" :src="goods.img || defaultImg"></image>
                        <text class="goods-tit font-msyhl">{{goods.title}}</text>
                    </div>
                </div>

                <div class="list-mid">
                    <div class="minus-btn" @click="decreaseCart">
                        <image resize="cover" class="minus-icon" :src="goods.cart_num <= 1 ? minusUnableIcon : minusIcon"></image>
                    </div>

                    <text class="goods-num font-msyhl">{{goods.cart_num}}</text>

                    <div class="plus-btn" @click="increaseCart">
                        <image resize="cover" class="plus-icon" :src="goods.cart_num >= goods.g_num ? plusUnableIcon : plusIcon"></image>
                    </div>
                </div>

                <text class="goods-price font-msyhl">{{goods.g_actualmoney | currency('¥')}}</text>
            </div>
        </div>

        <text class="sent-status font-msyhl" v-if="goods.sent_status != '有货'">{{goods.sent_status}}</text>
        <text class="sent-status font-msyhl" v-if="goods.status">{{goods.status}}</text>
    </div>
</template>
<style scoped>
    .wrapper {
        background-color: #fff;
        align-items: stretch;
    }
    .cont {
        position: relative;
        height: 120px;
    }
    .cont-pre {
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .del-btn {
        padding-left: 30px;
        padding-right: 30px;
        height: 120px;
        line-height: 120px;
        font-size: 30px;
        color: #fff;
        background-color: #e31336;
    }
    .cont-list {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 30px;
        padding-right: 30px;
        background-color: #fff;
    }
    .list-left {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }
    .check-goods {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 45px;
        height: 120px;
    }
    .check-img {
        width: 35px;
        height: 35px;
    }
    .goods-detail {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 120px;
    }
    .goods-img {
        width: 100px;
        height: 100px;
        margin-right: 6px;
    }
    .goods-tit {
        width: 342px;
        padding-left: 2px;
        padding-right: 8px;
        lines: 2;
        text-overflow: ellipsis;
        font-size: 26px;
        color: #313131;
    }
    .list-mid {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 60px;
    }
    .minus-btn,
    .plus-btn {
        width: 66px;
        height: 60px;
        border-width: 1px;
        border-color: #f0f0f0;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .minus-btn {
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
    }
    .plus-btn {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
    }
    .minus-icon,
    .plus-icon {
        width: 40px;
        height: 40px;
    }
    .goods-num {
        padding-left: 24px;
        padding-right: 24px;
        height: 60px;
        line-height: 60px;
        color: #313131;
        font-size: 30px;
        border-width: 1px;
        border-color: #f0f0f0;
        background-color: #f8f8f8;
    }
    .goods-price {
        font-size: 30px;
        color: #313131;
    }
    .sent-status {
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 10px;
        font-size: 24px;
        color: #e31336;
    }
    .font-msyhl {
        font-family: msyhl;
    }
</style>
<script>
    import defaultImg from 'assets/images/default-img.png';
    import checkedImg from 'assets/images/checked-circle.png';
    import unCheckedImg from 'assets/images/unchecked-circle.png';
    import  minusIcon from 'assets/images/minus-icon.png';
    import minusUnableIcon from 'assets/images/minus-unable-icon.png';
    import  plusIcon from 'assets/images/plus-icon.png';
    import plusUnableIcon from 'assets/images/plus-unable-icon.png';
    import modal from 'utils/modal';
    import notification from 'utils/notification';
    import navigator from 'utils/navigator';
    import route from 'constants/route';
    import constant from 'constants/constant';
    import api from 'api/api';
    import cartService from 'services/cartService';
    const animation = weex.requireModule('animation');

    export default{
        props: {
            goods: {
                type: Object,
                required: true
            },
            refId: {
                type: String,
                default: null
            }
        },
        data(){
            return {
                swipeEnabled: false,
                defaultImg: defaultImg,
                checkedImg: checkedImg,
                unCheckedImg: unCheckedImg,
                minusIcon: minusIcon,
                minusUnableIcon: minusUnableIcon,
                plusIcon: plusIcon,
                plusUnableIcon: plusUnableIcon,
                loading: false
            }
        },
        methods: {
            checkGoods(){
                let str = this.goods.id + '_' + this.goods.num + '_';
                let status = 0;
                if(!this.goods.g_checked) status = 1;
                str += status;
                this.$emit('checkGoods', str);
            },
            delGoods(){
                api.sendHttp('delCartApi', {
                    id: this.goods.id
                }).then(res => {
                    //发送购物车商品删除事件
                    let _goodsIdList = [];
                    _goodsIdList.push(this.goods.id);
                    notification.send(constant.EVENT_CART_DELETE,_goodsIdList);

                    this.resetSwipe();
                    this.$emit("delGoods",res.data);
                }, res => {
                    modal.toast(res.msg || '操作失败');
                });
            },
            decreaseCart() { //从购物车递减商品
                let self = this;
                if(self.loading) return false;
                if(self.goods.cart_num <= 1) {
                    return false;
                }

                self.loading = true;
                api.sendHttp('updateCartApi', {
                    goods: self.goods.id + '_' + (parseInt(self.goods.cart_num)-1) + '_' + self.goods.g_checked
                }).then(res => {
                    self.loading = false;
                    self.goods.cart_num --;
                    cartService.sendEvent(res.data,res.data.goods);
                    this.$emit("updateGoods",res.data);
                }, res => {
                    self.loading = false;
                    modal.toast(res.msg || '操作失败');
                });
            },
            increaseCart() { //增加商品至购物车
                let self = this;
                if(self.loading) return false;
                if(self.goods.cart_num >= self.goods.g_num) {
                    modal.toast('该商品暂时缺货，不能加入购车');
                    return false;
                }

                self.loading = true;
                api.sendHttp('updateCartApi', {
                    goods: self.goods.id + '_' + (parseInt(self.goods.cart_num)+1) + '_' + self.goods.g_checked
                }).then(res => {
                    self.loading = false;
                    self.goods.cart_num ++;
                    cartService.sendEvent(res.data,res.data.goods);
                    this.$emit("updateGoods",res.data);
                }, res => {
                    self.loading = false;
                    modal.toast(res.msg || '操作失败');
                });
            },
            goToDetail() {
                let self = this;
                if(!self.goods || !self.goods.id) {
                    modal.toast('该商品不存在...');
                    return false;
                }

                navigator.pop(); //关闭当前购物车页面

                navigator.push({
                    url: route.detail_index,
                    title: '商品详情',
                    params: {
                        id: self.goods.id
                    }
                }, event => {
                    console.log('go to detail ...');
                });
            },
            onswipe(e){
                let self = this;
                if(self.swipeEnabled) return false;
                self.$emit("swipeStart");

                let direction = e.direction;
                let el = self.$refs.swipeTarget;
                let _translateX =  direction == "left" ?  'translateX(-120px)' : 'translateX(0)';
                animation.transition(el, {
                    styles: {
                        transform: _translateX,
                    },
                        duration: 0,
                        timingFunction: 'linear',
                },res=>{
                    self.$emit("swipeEnd", self.refId);
                });
            },
            resetSwipe(){
                let self = this;
                self.swipeEnabled = true;
                let el = this.$refs.swipeTarget;
                animation.transition(el, {
                    styles: {
                        transform: 'translateX(0)',
                    },
                        duration: 0,
                        timingFunction: 'linear',
                },res=>{
                      self.swipeEnabled = false;
                });
            }
        }
    }
</script>
